<style>
  * {
    box-sizing: border-box;
  }
  .root {
    width: 100%;
    display: flex;
    position: relative;
    padding: 32px;
    background: #F3F3FB;
  }
  .component {
    width: 82.2%;
    min-height: 100vh;
    padding-top: 1rem;
    
  }
  .divider {
    width: 17.8%;
    background: #fff;
    padding: 1rem;
  }
  .nav-link {
    text-decoration: none;
    color: #A1A1B5;
  }
  .nav-link:hover .mat-list-item {
    background-color: rgba(67, 67, 107, 0.04);
  }
  .nav-link .mat-list-item {
    color: #A1A1B5;
  }
  .nav-link.active-link .mat-list-item {
    color: #7A77FF;
  }
  @media screen and (max-width: 767px) {
    .divider {
      display: none;
    }
    .links {
      display: none;
    }
    .toolbar-desc {
      display: none;
    }
    .component {
      width: 100%;
    }
  }
</style>
<div class="root">
  <div class="divider">
    <app-user-avatar></app-user-avatar>
    <mat-list>
      <a class="nav-link"
         routerLinkActive="active-link"
         [routerLinkActiveOptions]="{exact: true}"
         *ngFor="let link of links" [routerLink]="[link.href]"
      >
        <mat-list-item>
          <mat-icon mat-list-icon>{{link.icon}}</mat-icon>
          <div mat-line>{{link.name}}</div>
        </mat-list-item>
      </a>
    </mat-list>
  </div>
  <div class="component">
    <router-outlet class="content"></router-outlet>
  </div>
</div>
